<script setup>
import {defineProps, ref} from "vue";

  let props = defineProps({
    data: {
      userUid: String,
      userId: Number,
      message: String,
      nickName: String,
      avatar: String,
      publishTime: Date
    },
    sourceUserUid: String
  })

  let writeProps = ref(props.data);

  // 是否为我发布的消息，自己发布的消息，需要倒转 inner-body-left inner-body-right 的贴浮位置
  let isMyPublishMessage = ref(props.data.userUid === props.sourceUserUid);

</script>

<template>
  <div :class="['chat-message-basic', !isMyPublishMessage ? 'dynamic-left-float':'dynamic-right-float']">
    <div :class="['inner-body-left', !isMyPublishMessage ? 'dynamic-left-float':'dynamic-right-float']">
      <div :class="['chat-avatar-basic']" v-if="false">
        <div class="chat-image-avatar">
          <img src="http://120.46.171.159:9000/biscuit-tag-page/avatar/default.jpg" alt="">
        </div>
      </div>
      <div :class="['chat-avatar-basic chat-text-avatar']" v-if="true">
        {{ writeProps.nickName.substring(0, 1) }}
      </div>
    </div>
    <div :class="['inner-body-right', !isMyPublishMessage ? 'dynamic-left-float':'dynamic-right-float']">
      <div class="nickname" :style="!isMyPublishMessage ? 'text-align:left;':'text-align:right;'">{{ writeProps.nickName }}</div>
      <div class="message-basic">
        <div :class="['message', !isMyPublishMessage ? 'dynamic-left-float':'dynamic-right-float']"
             :style="!isMyPublishMessage ?
           'background-color:white;':'background-color:rgb(156 203 89);'">{{ writeProps.message }}</div>
      </div>

    </div>
  </div>
</template>

<style scoped>
  .chat-message-basic {
    width: 70%;
    overflow: hidden;
    margin: 15px 10px;
    font-family: '微软雅黑',serif;
  }

  .inner-body-left {
    width: 50px;
    height: 50px;
    overflow: hidden;
  }

  .inner-body-right {
    width: calc(100% - 50px);
    overflow: hidden;
  }

  .chat-avatar-basic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }

  .chat-image-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .chat-image-avatar img {
    width: 100%;

    user-select: none;
    user-drag: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
  }

  .chat-text-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(201, 201, 201);
    color: rgb(238, 238, 238);
    font-size: 26px;
  }

  .nickname {
    width: calc(100% - 16px);
    overflow: hidden;
    font-size: 14px;
    color: rgb(102, 102, 102);
    padding: 0 8px;

    user-select: none;
  }

  .message-basic {
    width: calc(100%);
    overflow: hidden;
  }
  .message {
    max-width: calc(100% - 30px);
    background-color: white;
    border-radius: 4px;
    width: max-content;
    word-wrap: break-word;
    margin: 5px;
    padding: 6px 10px;
    font-size: 15px;
    color: rgb(58, 58, 58);
  }

  .dynamic-left-float {
    float: left;
  }
  .dynamic-right-float {
    float: right;
  }
</style>